<template>
  <div>
    <section>
      <div class="title-add">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addMenu"
          size="small"
          >新增菜单</el-button
        >
      </div>
      <div class="title-serch">
        <el-input
          v-model="menuName"
          placeholder="请输入菜单名称"
          clearable
          size="small"
          style="width:40%;"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          style="margin-left: 15px"
          @click="getList"
          size="small"
          >查询</el-button
        >
        <el-button
          type="success"
          icon="el-icon-circle-close"
          style="margin-left: 15px"
          @click="cleanUp"
          size="small"
          >清除</el-button
        >
      </div>

      <el-table border ref="filterTable" :data="tableData" :header-cell-style="{background:'#f4f4f4', color:'#727479'}">
        <el-table-column prop="orderNum" label="排序" width="60" align="center"></el-table-column>
        <el-table-column prop="name" label="菜单名称" width="100" align="center"></el-table-column>
        <el-table-column prop="menuType" label="菜单类型" width="100" align="center"
                         :filters="[{ text: '目录', value: 'M' }, { text: '菜单', value: 'C' }, { text: '按钮', value: 'B' }]"
                         :filter-method="filterTag" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.menuType === 'M' ? 'success':'primary'" disable-transitions>
              {{ scope.row.menuType === 'M' ? '目录' : scope.row.menuType === 'C' ? '菜单' : '按钮' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限code" width="180" align="center"></el-table-column>
        <el-table-column prop="isVisible" label="是否启用" width="80" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isVisible === true ? 'success':'danger'">
              {{ scope.row.isVisible === true ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="iconImg" label="菜单图标" width="150" align="center">
          <template slot-scope="scope">
            <i :class="scope.row.iconImg" style="font-size: 25px;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="parentName" label="父级" align="center" width="100"></el-table-column>
        <el-table-column prop="url" label="页面url" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editData(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </section>

    <!--新增/编辑模态框-->
    <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
               :before-close="handleDialogClose">
      <el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules"
               class="form">
        <el-row>
          <el-col :span="10">
            <el-form-item prop="name" label="菜单名称：" :label-width="formLabelWidth">
              <el-input v-model="addAndEditFormData.name" placeholder="请输入菜单名称" style="width:100%" type="text"
                        autosize></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="pid" label="父级：" :label-width="formLabelWidth">
              <el-select v-model="addAndEditFormData.pid" placeholder="请选择父级菜单" style="width:100%" clearable>
                <el-option :value="pidTemp.id" :label="pidTemp.name"
                           style="height:150px;overflow: auto;background-color:#fff">
                  <el-tree :data="pidData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="code" label="权限code：" :label-width="formLabelWidth">
          <el-input v-model="addAndEditFormData.code" placeholder="请输入权限code" style="width:90%" type="text"
                    autosize></el-input>
        </el-form-item>
        <el-form-item prop="url" label="页面url：" :label-width="formLabelWidth">
          <el-input v-model="addAndEditFormData.url" placeholder="请输入页面url" style="width:90%" type="text"
                    autosize></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item prop="menuType" label="菜单类型：" :label-width="formLabelWidth">
              <el-select v-model="addAndEditFormData.menuType" placeholder="请选择是否关闭" style="width:100%" clearable>
                <el-option value="M" label="目录"></el-option>
                <el-option value="C" label="菜单"></el-option>
                <el-option value="B" label="按钮"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="isVisible" label="是否启用：" :label-width="formLabelWidth">
              <el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66"
                         inactive-color="#ff4949"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item prop="orderNum" label="排序：" :label-width="formLabelWidth">
              <el-input v-model="addAndEditFormData.orderNum" placeholder="请输入菜单排序" style="width:100%" type="number"
                        min="0" autosize></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="iconImg" label="菜单图标：" :label-width="formLabelWidth">
              <el-popover placement="top" title="点击选择需要设置的图标" width="260" trigger="click">
                <span v-for="(item,index) in iconData" :key="index">
                  <i :class="item" @click="getIcon(item)" style="font-size: 26px;"></i>
                </span>
                <el-button type="primary" slot="reference">选择icon图标</el-button>
              </el-popover>
            </el-form-item>
            <i :class="addAndEditFormData.iconImg" class="icon-img"></i>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleConfirmEvent('addAndEditElForm')">确 定</el-button>
        <el-button @click="handleDialogClose">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "stuMenu",
  data() {
    return {
      total: 1,      // 总数
      page: 1,       // 当前页
      limit: 10,     // 分页大小
      menuName: '',
      tableData: [],
      /* 模态框相关 */
      title: '',
      closeOnClickModal: false,
      addAndEditDialogFormVisible: false,
      isEditable: true,                   // 标志是否是编辑
      showAddAndEditForm: false,
      showForm: false,
      formLabelWidth: '150px',
      addAndEditFormData: {
        id: '',
        iconImg: '',
        name: '',
        url: '',
        code: '',
        pid: '',
        menuType: '',
        isVisible: '',
        orderNum: ''
      },
      addAndEditRules: {
        name: {
          required: true, message: '菜单名称不能为空', trigger: 'blur'
        },
        code: {
          required: true, message: '权限code不能为空', trigger: 'blur'
        },
        orderNum: {
          required: true, message: '排序不能为空', trigger: 'blur'
        },
      },
      /* 下拉树形 */
      pidData: [],
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      pidTemp: {
        id: '11',
        name: '1'
      },
      iconData: ["el-icon-delete-solid", "el-icon-delete", "el-icon-s-tools", "el-icon-setting", "el-icon-user-solid", "el-icon-user", "el-icon-phone", "el-icon-phone-outline", "el-icon-star-on",
        "el-icon-star-off", "el-icon-s-goods", "el-icon-goods", "el-icon-warning", "el-icon-warning-outline", "el-icon-question", "el-icon-info", "el-icon-remove", "el-icon-circle-plus", "el-icon-success",
        "el-icon-error", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline", "el-icon-circle-check", "el-icon-circle-close", "el-icon-s-help",
        "el-icon-help", "el-icon-picture", "el-icon-picture-outline", "el-icon-picture-outline-round", "el-icon-upload", "el-icon-camera-solid", "el-icon-camera", "el-icon-video-camera-solid", "el-icon-video-camera",
        "el-icon-message-solid", "el-icon-bell", "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform", "el-icon-s-fold", "el-icon-s-unfold", "el-icon-s-operation", "el-icon-s-promotion",
        "el-icon-s-home", "el-icon-s-release", "el-icon-s-ticket", "el-icon-s-management", "el-icon-s-open", "el-icon-s-shop", "el-icon-s-marketing", "el-icon-s-flag", "el-icon-s-comment",
        "el-icon-s-finance", "el-icon-s-claim", "el-icon-s-custom", "el-icon-s-opportunity", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid", "el-icon-menu", "el-icon-folder", "el-icon-folder-opened",
        "el-icon-folder-add", "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-monitor", "el-icon-coin"
      ]
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 加载表格数据
      this.api.getApi("/menu/get?page=" + this.page + "&limit=" + this.limit + "&name=" + this.menuName).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.page = res.data.pageNum;
        this.limit = res.data.pageSize;
      })
    },

    // 分页大小
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },

    // 第几页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },

    // 清除
    cleanUp() {
      this.menuName = '';
      this.getList();
    },

    // 筛选菜单类型
    filterTag(value, row) {
      return row.menuType === value;
    },

    // 选择icon图标
    getIcon(value) {
      this.addAndEditFormData.iconImg = value;
    },

    // 树形下拉
    handleNodeClick(data) {
      this.pidTemp.id = data.id;
      this.$set(this.addAndEditFormData, 'pid', data.id);
      this.pidTemp.name = data.name;
    },

    // 加载树形菜单
    async getTreeMenuData(pid) {
      await this.api.getApi("/menu/get/treeMenu").then(res => {
        this.pidData = res.data;
        // pid不为空时候去给pidTemp设置相应数值
        if (pid !== '') {
          for (let i = 0; i < res.data.length; i++) {
            let temp = res.data[i];
            if (temp.id === pid) {
              this.pidTemp.id = temp.id;
              this.pidTemp.name = temp.name;
              return;
            }
            if (temp.child !== undefined) {
              this.findPid(temp.child, pid);
            }
          }
        }
      })
    },

    // 查找
    findPid(data, pid) {
      for (let i = 0; i < data.length; i++) {
        let temp = data[i];
        if (temp.id === pid) {
          this.pidTemp.id = temp.id;
          this.pidTemp.name = temp.name;
          return;
        }
        if (temp.child !== undefined) {
          this.findPid(temp.child, pid);
        }
      }
    },

    // 编辑
    editData(index, row) {
      this.getTreeMenuData(row.pid);
      this.title = "编辑";
      this.isEditable = true;
      this.$set(this.addAndEditFormData, 'id', row.id);
      this.$set(this.addAndEditFormData, 'url', row.url);
      this.$set(this.addAndEditFormData, 'iconImg', row.iconImg);
      this.$set(this.addAndEditFormData, 'name', row.name);
      this.$set(this.addAndEditFormData, 'code', row.code);
      this.$set(this.addAndEditFormData, 'pid', row.pid);
      this.$set(this.addAndEditFormData, 'menuType', row.menuType);
      this.$set(this.addAndEditFormData, 'isVisible', row.isVisible);
      this.$set(this.addAndEditFormData, 'orderNum', row.orderNum);
      this.showAddAndEditForm = true;
      this.addAndEditDialogFormVisible = true;
    },

    // 删除
    deleteData(id) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.api.deleteApi("/menu/delete?id=" + id).then(res => {
          if (res.data.code === 200) {
            this.getList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 关闭模态框
    handleDialogClose() {
      this.showAddAndEditForm = false;
      this.addAndEditFormData = {};
      this.addAndEditDialogFormVisible = false;
    },

    // 保存/修改
    handleConfirmEvent(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let formData = this.addAndEditFormData;
          if (this.isEditable) {
            if (formData.id === formData.pid) {
              this.$message.error('出现错误，父级不可以是自己');
              return;
            }
            this.api.putApi("/menu/update", formData).then(res => {
              if (res.data.code === 200) {
                this.getList();
                this.handleDialogClose();
              }
            })
          } else {
            this.api.postApi("/menu/add", formData).then(res => {
              if (res.data.code === 200) {
                this.getList();
                this.handleDialogClose();
              }
            })
          }
        }
      })
    },

    // 新增
    addMenu() {
      this.getTreeMenuData();
      this.title = "新增";
      this.isEditable = false;
      this.$set(this.addAndEditFormData, 'menuType', 'M');
      this.$set(this.addAndEditFormData, 'isVisible', true);
      this.showAddAndEditForm = true;
      this.addAndEditDialogFormVisible = true;
    },
  }
}
</script>

<style scoped>
.title-add {
  margin-bottom: 10px;
  float: left;
}

.title-serch {
  float: right;
}

.bottom-page {
  margin-top: 25px;
}

.icon-img {
  position: absolute;
  right: 190px;
  bottom: 20px;
  font-size: 40px;
}
</style>
